<template>
    <div>
        <div id="my-form">
            <div class="title-cont">收支凭证</div>
            <div class="text-cont1">
                <p>推荐人：</p>
                <p>日期：{{ nowTime }}</p>
                <p>No:0000208</p>
            </div>
            <el-card shadow="never" :body-style="{ padding: '0' }">
                <el-descriptions :column="4" size="default" border>
                    <el-descriptions-item label="姓名" :span="2">{{ name ? name : '' }}</el-descriptions-item>
                    <el-descriptions-item label="身份证号码" :span="2">{{ cardId ? cardId : '' }}</el-descriptions-item>
                    <el-descriptions-item label="缴费项目">{{ type ? type : '' }}</el-descriptions-item>
                    <el-descriptions-item label="报考车型">{{ carType ? carType : '' }}</el-descriptions-item>
                    <el-descriptions-item label="办理通道" :span="2">前台</el-descriptions-item>
                    <el-descriptions-item label="应收金额">{{ ReceivedMoney ? ReceivedMoney : '' }}</el-descriptions-item>
                    <el-descriptions-item label="实收金额">{{ money }}</el-descriptions-item>
                    <el-descriptions-item label="金额大写" :span="2">壹仟贰佰元整</el-descriptions-item>
                    <el-descriptions-item label="备注" :span="3">{{ descr ? descr : '' }}</el-descriptions-item>
                    <el-descriptions-item label="手机号">{{ phone ? phone : '' }}</el-descriptions-item>
                    <el-descriptions-item label="收费摘要">此凭据为学员缴费凭证，如因自身原因导致丢失，平台方一律不做挂失收费金额入账后不予退款</el-descriptions-item>
                </el-descriptions>
            </el-card>
            <div class="text-cont1">
                <p>收款单位: 张大炮驾校</p>
                <p>校区: 大炮校区</p>
                <p>开票人:张大炮</p>
            </div>
        </div>
        <div class="btn-cont2">
            <el-button type="success" size="default" v-print="printObj">
                打印
            </el-button>

        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { ExpenType } from '../../../types/expenditure';
import { handleDate } from '../../../utils/tools';

const printObj = reactive({
    id: "my-form",
    popTitle: '汉丰驾校',
})
interface PropsType {
    PrintData: ExpenType
}
const props = defineProps<PropsType>()
let { name, type, cardId, ReceivedMoney, money, descr, phone, carType } = props.PrintData

const time = new Date()
const nowTime = handleDate(time)
</script>

<style  lang="scss">
.title-cont {
    font-size: 20px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin: auto;
    font-weight: bolder;
    font-family: '黑体';
    border-bottom: 1px solid #666;
}

.text-cont1 {
    display: flex;
    justify-content: space-between;
    font-weight: bolder;
    font-family: '黑体';
    line-height: 30px;
    padding: 0 8px;
    margin-bottom: 10px;
}

.el-card__body {
    border-radius: 0;
}

.el-descriptions__table {
    tr {
        background-color: white;
        color: #1e1e1e;

        td {
            text-align: center;
        }
    }

    .el-descriptions__cell.el-descriptions__label.is-bordered-label {
        background-color: white;
    }

    tr:nth-of-type(1) {
        td:nth-of-type(1) {
            width: 85px;
        }

        td:nth-of-type(3) {
            width: 100px;
        }
    }

    tr:nth-of-type(2) {
        td:nth-of-type(2) {
            width: 105px;
        }
    }
}

.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
    border: 1px solid #1e1e1e;
}

.el-descriptions__label.el-descriptions__cell.is-bordered-label {
    color: #1e1e1e;
    font-weight: bold;
}

.el-descriptions__content.el-descriptions__cell.is-bordered-content {
    color: #1e1e1e;
    font-weight: bold;
}

.btn-cont2 {
    display: flex;
    justify-content: center;

    span {
        display: block;
        width: 200px;
    }

    >button {
        background-color: #5fb878;
        height: 40px;
    }
}
</style>